<template>
  <view class="con">
    <image class="bg" src="../../static/home/lzpxBg.png" mode="aspectFill" />
    <view class="back" @click="goBack">
      <u-icon name="arrow-left" size="24" color="#fff"></u-icon>
    </view>
    <view class="main">
      <view class="video">
        <view @click="videoPlay" v-if="!replayUrl" class="vi" style="">
          <image src="" style="height: 100%; width: 100%" mode="aspectFill" />
          <view class="iconBox">
            <u-icon name="play-circle" size="70" color="#fff"></u-icon>
          </view>
        </view>
        <video v-else :show-play-btn="true" :show-fullscreen-btn="true" autoplay :src="replayUrl" style="height: 100%; width: 100%"></video>
      </view>
      <view class="tabBox">
        <up-tabs
          :list="coteList"
          lineColor="#fff"
          :activeStyle="{
            color: '#fff',
            fontWeight: 'bold',
            transform: 'scale(1.10)',
          }"
          @click="tabClick"
          :inactiveStyle="{
            color: '#6c87c3',
          }"
        ></up-tabs>
      </view>
      <template v-if="list.length > 0">
        <view class="box" v-for="(item, index) in list" :key="index" @click="goPage('/pages/home/doctorDetails')">
          <image src="" mode="aspectFill" />
          <view class="r">
            <view class="top">
              <view class="l">
                <view class="tit">
                  想过风
                  <view class="label">金牌专家</view>
                </view>
                <view class="ctn"> 杭州薇琳医疗美容医院 从业20年</view>
                <view class="fx"> <text>骨科</text> <text>骨科</text></view>
              </view>
            </view>
            <view class="btnBOX">
              <view class="btn">私信联系</view>
              <view class="fw">服务人次 <text>729</text></view>
            </view>
          </view>
        </view>
      </template>

      <view v-else style="width: 100%; display: flex; justify-content: center"> <u-empty mode="list"></u-empty> </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ysSelectCote, ysSelectLst } from "@/api/home";
import { goBack, goPage } from "@/utils/commonFn";
import { onMounted, ref } from "vue";

//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
const coteList = ref<any[]>([]);
const tabActive = ref("");
const list = ref([]);
const replayUrl = ref("");
onMounted(async () => {
  const res = await ysSelectCote();
  coteList.value = res.data.map((i: any) => ({
    value: i.id,
    name: i.title,
  }));
  coteList.value.unshift({
    name: "全部",
    value: "",
  });
  rest();
});
const tabClick = (item: any) => {
  tabActive.value = item.value;
  rest();
};

const goodsStatus = ref("loadmore");
const goodsPage = ref(1);
const getList = async () => {
  if (goodsStatus.value == "nomore") {
    return;
  }
  goodsStatus.value = "loadmore";
  const res = await ysSelectLst({ pageNo: goodsPage.value, cate: tabActive.value });
  list.value = list.value.concat(res.data.list);
  if (!res.data.next) {
    goodsStatus.value = "nomore";
  } else {
    goodsStatus.value = "loadmore";
  }
};
onReachBottom(() => {
  goodsPage.value++;
  getList();
});
const rest = () => {
  goodsPage.value = 1;
  goodsStatus.value = "loadmore";
  list.value = [];
  getList();
};
const videoPlay = async () => {
  replayUrl.value = "1231";
};
</script>
<style lang="less" scoped>
.con {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: linear-gradient(94deg, #022d92 0%, #0335a6 100%);
  padding-bottom: 50rpx;
  .bg {
    width: 100%;
    height: 956rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
  }
}
.video {
  width: 100%;
  height: 360rpx;
  background: #050608;
  box-shadow: 0rpx 24rpx 40rpx 0rpx rgba(35, 104, 241, 0.16);
  border-radius: 18rpx;
  margin-top: 480rpx;
  .vi {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16rpx 16rpx 16rp;
  }
}
.iconBox {
  position: absolute;
}
.tabBox {
  position: relative;
  z-index: 15;
  margin-top: 30rpx;
}
.box {
  display: flex;
  margin-bottom: 32rpx;
  background: #fff;
  margin-top: 30rpx;
  padding: 40rpx;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  gap: 20rpx;
  image {
    width: 184rpx;
    height: 184rpx;
    border: 2rpx solid #81d8d0;
    border-radius: 50%;
  }
  .r {
    width: calc(100% - 204rpx);
    .top {
      .l {
        .tit {
          display: flex;
          align-items: center;
          font-size: 30rpx;
          color: #333333;
          .label {
            background: #feeacf;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            font-size: 24rpx;
            color: #b68f54;
            padding: 8rpx;
            margin-left: 26rpx;
          }
        }
        .fx {
          font-size: 24rpx;
          color: #8a8a8d;
          gap: 8rpx;
          margin-top: 10rpx;
          text {
            background: #f6f9ff;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            padding: 8rpx;
          }
        }
      }
      .ctn {
        font-size: 28rpx;
        color: #333333;
        margin-top: 12rpx;
        margin-bottom: 20rpx;
      }
    }
    .btnBOX {
      display: flex;
      align-items: center;
      margin-top: 30rpx;
      .fw {
        font-size: 24rpx;
        color: #81d8d0;
        margin-left: 40rpx;
        text {
          font-size: 36rpx;
        }
      }
    }
    .btn {
      width: 144rpx;
      height: 50rpx;
      background: #81d8d0;
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      font-size: 24rpx;
      color: #ffffff;
      text-align: center;
      line-height: 50rpx;
    }
  }
  &:nth-of-type(2n) {
    flex-direction: row-reverse;
  }
}
</style>
